<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>团队工作上报管理<small>团队工作上报</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>团队工作</el-breadcrumb-item>
                <el-breadcrumb-item>新建上报</el-breadcrumb-item>
                <el-breadcrumb-item>选择成员与模式</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">选择工作项</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="app-container">
            <div style="font-family: 华文楷体"><span>模式：按人填报</span></div>
            <div style="font-family: 华文楷体">
                <span>成员：</span>
                <span v-for="(username,index) in usernames" style="margin-right: 10px">
                    {{username.username}}
                    <span v-if="index!==(usernames.length-1)">、</span>
                </span>
            </div>
            <div class="box">
                <el-tree
                        :data="tree_data"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :props="defaultProps">
                </el-tree>
                <hr style="height:2px;border-radius: 3px; background-color: #3c8dbc">
                <div class="buttons" style="text-align: center">
                    <el-button type="success" @click="getCheckedNodes" plain>确定</el-button>
                    <el-button type="warning" @click="resetChecked" plain>清空重选</el-button>
                    <el-button type="danger" @click="giveUp()" plain>放弃填报</el-button>
                    <el-button type="primary" @click="goBack()" plain>返回</el-button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                usernames:[],
                tree_data: [],
                defaultProps: {
                    label: 'label',
                    children: 'children'
                },
            };
        },
        created() {
            let checkboxDataString = sessionStorage.getItem("checkboxData");
            let checkboxData = JSON.parse(checkboxDataString);
            this.usernames = this.recursiveAssignmentUsernames(checkboxData);
            let j = 0;
            for (let i = 0; i < checkboxData.length; i++) {
                if (checkboxData[i].idCardNumber!==""){
                    this.usernames[j].username = checkboxData[i].label;
                    this.usernames[j++].idCardNumber = checkboxData[i].idCardNumber;
                }
            }
            this.findWorkItems();
        },
        methods: {
            <!--确认-->
            getCheckedNodes() {
                sessionStorage.setItem("treeData",JSON.stringify(this.$refs.tree.getCheckedNodes()));
                sessionStorage.setItem("usernames",JSON.stringify(this.usernames));
                window.location.href="team_person_writeItems.html";
            },
            <!--清除重选-->
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            },
            <!--创建树形控件骨架-->
            recursiveAssignmentUsernames(listData){
                let list = [];
                for (let i=0;i<listData.length;i++){
                    if (listData[i].idCardNumber!==""){
                        let map = {
                            username:'',
                            idCardNumber:''
                        };
                        list.push(map);
                    }
                }
                return list;
            },
            <!--创建树形控件骨架-->
            recursiveAssignment(listData){
                let list = [];
                listData.forEach(item => {
                    let map = {
                        id:'',
                        label:'',
                        grade:''
                    };
                    if (item.children){
                        map.children = this.recursiveAssignment(item.children)
                    };
                    list.push(map)
                })
                return list;
            },
            //查询所有工作项，并复制给数据变量用于展示
            findWorkItems(){
                let _this = this;
                axios.get("/kpi_assess/departments").then((resp)=>{
                    _this.tree_data = _this.recursiveAssignment(resp.data.data);
                    let departmentsLength = resp.data.data.length
                    for (let i=0;i<departmentsLength;i++){
                        _this.tree_data[i].id = resp.data.data[i].id;
                        _this.tree_data[i].label = resp.data.data[i].department;
                        let workTypesLength = resp.data.data[i].children.length;
                        for (let j=0;j<workTypesLength;j++){
                            _this.tree_data[i].children[j].id=resp.data.data[i].id+'-'+resp.data.data[i].children[j].id;
                            _this.tree_data[i].children[j].label=resp.data.data[i].children[j].workType;
                            let itemsLength = resp.data.data[i].children[j].children.length;
                            for (let k = 0;k < itemsLength;k++){
                                _this.tree_data[i].children[j].children[k].id =_this.tree_data[i].children[j].id + '-'+ resp.data.data[i].children[j].children[k].id;
                                _this.tree_data[i].children[j].children[k].label = resp.data.data[i].children[j].children[k].item;
                                _this.tree_data[i].children[j].children[k].grade = resp.data.data[i].children[j].children[k].grade;
                            }
                        }
                    }
                });
            },
            <!--放弃填报-->
            giveUp(){
                //跳转到首页
                window.location.href="welcome.html";
            },
            <!--返回-->
            goBack() {
                //跳转到上一页
                window.location.href="choose_model.html";
            }

        }
    })
</script>
</html>